import { Card, Dropdown, type MenuProps } from "antd"
import { classNames } from 'packages/shared/utils/classnames'
import { CheckCircleOutlined, ClockCircleOutlined, ExclamationCircleOutlined, MoreOutlined, PlayCircleOutlined } from "@ant-design/icons"
import { WorkStatus } from '../../types'
import type { WorkItemProps } from '../../types'
import { useDraggable } from "@dnd-kit/core"
import { useState } from "react"

const items: MenuProps['items'] = [
    {
        label: '删除',
        key: 'delete',
    },
    {
        label: '编辑',
        key: 'edit',
    },
    {
        label: '完成',
        key: 'completed',
    },
]
const WorkItem = (props: WorkItemProps) => {
    const [open, setOpen] = useState(false)
    const { title, status, times, content, id, onEdit } = props
    const { attributes, listeners, setNodeRef, transform } = useDraggable({
        id,
    })

    const style: any = transform
        ? {
            transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
            zIndex: 1,
            border: "2px dashed #2196F3",
            position: 'absolute'
            
        }
        : undefined;
    const deleteWork = () => {
        console.log('delete')
    }
    const handleMenuClick = (e: any) => {
        switch (e.key) {
            case "delete":
                window?._antdModal?.confirm({
                    title: "确定删除吗？",
                    icon: <ExclamationCircleOutlined />,
                    content: "删除后无法恢复",
                    okText: "删除",
                    cancelText: "取消",
                    onOk() {
                        deleteWork()
                    },
                });
                break;
            case "edit":
                if(onEdit) onEdit(id)
                break;
            case "completed":

                break;
            default:
                break;
        }
    }
    return (
        <Card ref={setNodeRef} style={style} {...attributes} data-item-id={id} className={classNames('work-item', status)}>
            <div className="work-item__title">
                <div className="desc" onClick={() => alert(1)}>{title}</div>
                <div className="opts" onClick={(e) => e.preventDefault()}>
                    <Dropdown
                        menu={{
                            items,
                            onClick: handleMenuClick,
                        }}
                    >
                        <a onClick={(e) => { e.preventDefault() }}>
                            <MoreOutlined />
                        </a>
                    </Dropdown>

                </div>
            </div>
            <div className="work-item__warp" {...listeners}>
                <div className="work-item__content">
                    {
                        content
                    }
                </div>
                <div className="work-item__status">
                    <div className="work-item__status__opt">
                        {
                            status === WorkStatus.PENDING && <PlayCircleOutlined />
                        }
                        {
                            status === WorkStatus.INPROGRESS && <ClockCircleOutlined />
                        }
                        {
                            status === WorkStatus.COMPLETED && <CheckCircleOutlined />
                        }
                    </div>
                    <div className="work-item__status__time">
                        {
                            times
                        }
                    </div>
                </div>
            </div>
        </Card>
    )
}

export default WorkItem